<template>
    <div class="form2 pb100">
        <sc-title>家庭信息 (至少填写一位)</sc-title>
        <van-form ref="van-form" scroll-to-error :show-error="false">
            <div class="form-box" v-for="(item,index) in subForm.familyMember" :key="item.key">
                <div v-if="subForm.familyMember.length>1" class="form-index pl10 pr10 flex-row-sb-c"><span class="span">第{{ index + 1 }}项</span>
                    <van-button size="mini" type="danger" class="saasIcon"
                                @click="$toast.success(`第${index + 1}项\n删除成功`);subForm.familyMember.splice(index,1)">移除&#xe62b;
                    </van-button>
                </div>
                <!-- 关系-->
                <van-field
                    :value="item.relation"
                    required
                    input-align="right"
                    error-message-align="right"
                    name="relation"
                    label="关系"
                    placeholder="点击选择关系"
                    @click="item.popup.relation = true"
                    :rules="[{ required: true, message: '请选择关系' }]"

                    right-icon="arrow-down"
                    readonly
                    clickable
                />
                <van-popup v-model="item.popup.relation" position="bottom">
                    <van-picker
                        title="选择报考类型"
                        show-toolbar
                        :columns="['妈妈', '爸爸', '爷爷', '奶奶','哥哥','弟弟','姐姐','其他']"
                        @confirm="(value)=>{item.relation = value;item.popup.relation = false}"
                        @cancel="item.popup.relation = false"
                    />
                </van-popup>

                <!--姓名-->
                <van-field
                    v-model="item.name"
                    required
                    input-align="right"
                    error-message-align="right"
                    name="name"
                    label="姓名"
                    placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                />

                <!--职业-->
                <van-field
                    v-model="item.profession"
                    required
                    input-align="right"
                    error-message-align="right"
                    name="profession"
                    label="现就读学校"
                    placeholder="请填写职业"
                    :rules="[{ required: true, message: '请填写职业' }]"
                />

                <!--工作单位-->
                <van-field
                    v-model="item.employer"
                    required
                    input-align="right"
                    error-message-align="right"
                    name="employer"
                    label="工作单位"
                    placeholder="请填工作单位"
                    :rules="[{ required: true, message: '请填工作单位' }]"
                />

                <!--联系电话-->
                <van-field
                    v-model="item.contactInformation"
                    required
                    input-align="right"
                    type="tel"
                    error-message-align="right"
                    name="contactInformation"
                    label="联系电话"
                    placeholder="请填写正确手机号"
                    :rules="[{ pattern:/^1[3-9][0-9]{9}$/,required: true, message: '手机号格式不正确' }]"
                />
            </div>
            <p class="add-form-btn pl15 flex-row--c" @click="addForm"><span class="saasIcon mr3">&#xe641;</span>增加家长</p>
        </van-form>

        <div class="fixed-btn" v-if="!isFous">
            <sc-button type="stop" width="150px" @click="$emit('changeStep',0)">上一步</sc-button>
            <div class="ml10">
                <sc-button width="190px" @click="onSubmit">保存,下一步</sc-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "form2",
    data() {
        return {
            subForm: {
                familyMember: [
                    {
                        key: +new Date(),
                        "contactInformation": "",//联系方式
                        "employer": "",//工作单位
                        "name": "",//姓名
                        "profession": "",//职业
                        "relation": "",//关系
                        popup: {
                            relation: false,//关系
                        },
                    }
                ],
            },
        }
    },
    created() {
        if (this.$ls.get('subForm2')) this.subForm = this.$ls.get('subForm2')
    },
    destroyed() {
        this.$ls.set('subForm2', this.subForm)
    },
    methods: {
        onSubmit() {
            this.$refs['van-form'].validate().then(() => {
                // 验证通过
                this.$ls.set('subForm2', this.subForm)
                this.$toast.success('保存成功！\n下一步')
                setTimeout(() => {
                    this.$emit('changeStep', 2)
                }, 1000)
            }).catch(() => {
                //验证失败
                this.$toast.fail('必填项\n未填写')
            })
        },
        addForm() {
            this.subForm.familyMember.push({
                key: +new Date(),
                "contactInformation": "",//联系方式
                "employer": "",//工作单位
                "name": "",//姓名
                "profession": "",//职业
                "relation": "",//关系
                popup: {
                    relation: false,//关系
                },
            })
        },
        reset() {
            this.subForm = {
                familyMember: [
                    {
                        key: +new Date(),
                        "contactInformation": "",//联系方式
                        "employer": "",//工作单位
                        "name": "",//姓名
                        "profession": "",//职业
                        "relation": "",//关系
                        popup: {
                            relation: false,//关系
                        },
                    }
                ],
            }
            this.$toast.success('重置成功！')
            this.$ls.set('subForm2', this.subForm)
        },
    },
}
</script>
<style lang='scss' scoped>
.form2 {
    .form-index {
        height: 30px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 5px;

        .span {
            color: #666;
            font-size: 14px;
        }
    }

    .add-form-btn {
        //height:20px;
        font-size: 13px;
        color: $color;

        .saasIcon {
            color: $color;
            //font-size:18px;
        }

    }
}
</style>
